<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="<%=basePath%>" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新增用户</title>
<link href="static/css/style.css" rel="stylesheet" type="text/css" />
<style>
li>span{  
    white-space: nowrap;  /*强制span不换行*/
    display: inline-block;  /*将span当做块级元素对待*/
    margin-left:10px;
}
.error{
    color:red;
}
</style>
</head>

<body>

	<div class="place">
    <span>位置：</span>
    <ul class="placeul">
    <li><a href="user/right">首页</a></li>
    </ul>
    </div>
    
    <div class="formbody">
    
    
    <div id="usual1" class="usual"> 
    
    <div class="itab">
  	<ul> 
    <li><a href="#tab1" class="selected">新增用户</a></li> 
  	</ul>
    </div> 
    
    <form id="addUserForm" action="" method="post">
  	<div id="tab1" class="tabson">
    
    <div class="formtext">Hi，<b>${loginUser.username}</b>，欢迎您试用新增用户功能！</div>
    
    <ul class="forminfo">
    <li><label>名字<b>*</b></label><input id="name" name="name" type="text" class="dfinput" value=""  style="width:250px;"/></li>
   	<li><label>年龄<b>*</b></label><input id="age" name="age" type="text" class="dfinput" value=""  style="width:250px;"/></li>
 	<li>
 	    <label>性别<b>*</b></label>
    <table>
    <tbody>
    <tr style="height: 34px">
        <td><input name="sex"  type="radio" checked="checked" value="1" /></td><td>&nbsp;男&nbsp;&nbsp;</td>
        <td><input name="sex"  type="radio" value="0" /></td><td>&nbsp;女&nbsp;&nbsp;</td> 
    </tr>   
    </tbody>   
    </table>
 	</li>
 	<li><label>登陆帐号<b>*</b></label><input id="username" name="username" type="text" class="dfinput" value=""  style="width:250px;"/></li>
 	<li><label>登陆密码<b>*</b></label><input id="password" name="password" type="password" class="dfinput" value=""  style="width:250px;"/></li>
 	<li><label>确认密码<b>*</b></label><input id="confirm_password" name="confirm_password" type="password" class="dfinput" value=""  style="width:250px;"/></li>
    <li>
    <label>角色<b>*</b></label>
    <table>
    <tbody>
    <tr style="height: 34px">
    	<td><input name="role"  type="radio" value="1" checked="checked" /></td><td>&nbsp;超级管理员&nbsp;&nbsp;</td>
    	<td><input name="role"  type="radio" value="2" /></td><td>&nbsp;采购员&nbsp;&nbsp;</td> 
    	<td><input name="role"  type="radio" value="3" /></td><td>&nbsp;仓库管理员&nbsp;&nbsp;</td> 
    	<td><input name="role"  type="radio" value="4" /></td><td>&nbsp;销售员&nbsp;&nbsp;</td> 
    </tr>   
    </tbody>   
    </table>
    </li>
   	 	
    <li><label>&nbsp;</label><input id="submitBtn" type="submit" class="btn" value="提交"/></li>
    </ul>
    
    </div> 
    </form>
    
	</div> 
        
    
    </div>
<script language="javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/jquery.idTabs.min.js"></script>
<script src="static/layer/layer.js" charset="utf-8"></script>
<!-- 校验 -->
<script language="javascript" src="static/js/jquery.validate.min.js"></script>
<script language="javascript" src="static/js/messages_zh.js"></script>

<script type="text/javascript">
$("#usual1 ul").idTabs();
$('.tablelist tbody tr:odd').addClass('odd');
</script>
<script type="text/javascript">

  function add(){
	  var user = $("#addUserForm").serialize();

	  $.post('user/add',user,function(result){
		  if(null != result.code && result.code >= 1){
	          //获取窗口索引
	          var index = parent.layer.getFrameIndex(window.name);
	          //关闭iframe页面
	          //parent.layer.close(index);
		      parent.layer.alert('操作成功',function(){		    	  
		    	  parent.layer.close(index);
		    	  parent.location.reload(); // 刷新父窗口
		      });
		     
		      return;
		  }
		  parent.layer.alert('操作失败,请稍后再试');
	  },'json');
  }
  
</script>

<script type="text/javascript">
/** validate */
 $.validator.setDefaults({
    submitHandler: function() {
    	add();
    }
});

  $().ready(function(){
    var validate = $("#addUserForm").validate({
        errorPlacement: function(error, element) {
        	error.insertAfter(element); 
        },
        errorElement: "span",
        rules:{
        	name:{
                required:true
            },
            age:{
                required:true,
                range:[18,40]
            },
            username:{
                required:true,
                remote:{   
                    url: "user/checkUsername",
                    type: "get",
                    dataType: "json",
                    data:{
                    	username: function() {   
                            return $("#username").val();   
                                  }
                           }     
                       } 
            },
            password:{
                required:true,
                rangelength:[3,10]
            },
            confirm_password:{
                equalTo:"#password"
            }                    
        },
        messages:{
        	name:{
                required:"请输入名字"
            },
            age:{
                required:"请输入年龄",
                range: $.validator.format("年龄最小:{0}, 最大:{1}。")
            },
            username:{
                required:"请输入帐号",
                remote:"用户名已存在"
            },
            password:{
                required: "密码不能为空",
                rangelength: $.validator.format("密码最小长度:{0}, 最大长度:{1}。")
            },
            confirm_password:{
                equalTo:"两次密码输入不一致"
            }                                    
        }
                  
    });    

});
</script>

</body>

</html>
